<template>
    <div>
    <!-- <div style="background: #F7F7F7"> -->
		<mescroll-vue ref="mescroll0" :up="getMescrollUp(0)" @init="mescrollInit0">
			<div id='dataList0' class="topclass">
						<div v-for="(item,index) in tab0.list" @click="mingxi(item.id)">
							<div class="top">
								<div class="time">
									<p>充值</p>
									<p>{{item.addtime}}</p>
								</div>
								<div class="price">
									¥{{item.amount}}
								</div>
							</div>
						</div>
					</div>
		</mescroll-vue>
    </div>

</template>

<script>
	  import MescrollVue from 'mescroll.js/mescroll.vue'
    export default {
        name: "Txjilu",
		components: {
		  MescrollVue
		},
      data(){
          return{
						imgSrc: require("../../assets/img/kongbai.png"), 
						tabType: 0 ,// 菜单类型
						tab0: {mescroll: null, list: [], isListInit: false}, // 全部
						chenload:false,
            arr:['1','1','1'],
						rechargeRecordarr:[],
						page:1,
						allLoaded:false,
          }
      },
      methods:{
          mingxi(id){
            this.$router.push({
                path:'/txmingxi',
								query:{
									id:id
								}
            })
          },
						mescrollInit0 (mescroll) {
							mescroll.tabType = 0; // 加入标记,便于在回调中取到对应的list
							this.tab0.mescroll = mescroll;
						},
						
						getMescrollUp (tabType) {
							let emptyWarpId = 'dataList' + tabType;
							return {
							auto: true,
							callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
							noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
							 empty: {
							 warpId: emptyWarpId, // 父布局的id;
							 icon: this.imgSrc, // 图标,默认null
							 tip: '您暂未有任何充值记录', // 提示
							 
							 },
							}
						},
						upCallback (page, mescroll) {
							if (mescroll.tabType === 0) {
							// 全部
							this.tab0.isListInit = true;// 标记列表已初始化,保证列表只初始化一次
								this.axios.get(this.$store.state.url +'User/rechargeRecord',{
									 params:{
										page: page.num,
										limit:20
									 }
								 }).then(res=>{
													// console.log(res.data.data.class)
									this.chenload = true;
									if(res.data.errcode==0||res.data.errcode=='0'){
											var curPageData = res.data.data.record;
											mescroll.endSuccess(curPageData.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
											 if (page.num === 1) this.tab0.list = []; // 如果是第一页需手动制空列表
											 this.tab0.list = this.tab0.list.concat(curPageData); // 追加新数据
											 // this.tab0.list=res.data.data.order
									}
								
								})
							}
						}
      },
			mounted() {
				this.sdk.getJSSDK('','',this.$store.state.url);	
				// this.rechargeRecord(0)
			}
    }
</script>

<style scoped>
	.mescroll {
	  position: fixed;
	  top: 0rem;
	  bottom: 0;
	  height: auto;
	}
	.topclass{
		background: #fff;
		padding-top: .1rem;
	}
	.top{
		width: 92%;
		margin: auto;
		margin-top: 0.4rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #ededed;
		padding-bottom: .43rem;
	}
  .time p:nth-child(1){
    font-size:0.3rem;
    color:rgba(51,51,51,1);
  }
  .time p:nth-child(2){
    font-size:0.24rem;
    color:rgba(153,153,153,1);
    line-height:0.32rem;
    margin-top: 0.3rem;
  }
  .price{
    font-size:0.3rem;
    color:rgba(51,51,51,1);
  }
  .p1{
    width: 92%;
    margin: auto;
    height: 0.02rem;
    background: #EDEDED;
    margin-top: 0.4rem;
  }
</style>
